.. _stylingexamples:

Styling examples
================

================
Different styles
================

| A different style can be defined for each "piece" of the PDF template using the class name.
| Let's take an example with the "piece" related to the logo:

.. code-block:: html

    <span class="company-logo-standard"><img src="imgs/logo.png"></span>


In CSS file are defined types of style for the logo with

.. code-block:: css

    /* company-logo-standard definition */
    .company-logo-standard img {
        border: 1px solid red;
    }
    /* company-logo-modern definition */
    .company-logo-modern img {
        border: 3px solid green;
    }

==============
Style families
==============

Each "piece" of the PDF template can be included in a :code:`div` or :code:`span` block with one o more style classes

.. code-block:: html

    <div class="class-name">here the template "piece"</div>
    
| This feature allows to define, in the style file (CSS) associated to a PDF generator,
  multiple families of styles to be used in the PDF template.
| Let's take an example with the logo "piece":

.. code-block:: html

    <span class="company-logo"><img src="imgs/logo.png"></span>

In the PDF template the logo is nested in a block to define the style family (`family-style-modern`)

.. code-block:: html

    <div class="family-style-modern">
        <span class="company-logo"><img src="imgs/logo.png"></span>
    </div>

In the CSS file are defined the style families

.. code-block:: css

    /* family-style-modern definition */
    .family-style-modern .company-logo {
        border: 3px solid green;
    }

========================================
Style families for the header and footer
========================================

| Let's see how to define different style families for the header.
| Since the header is included in a block with class :code:`header-body` we define two families: standard and modern.

.. code-block:: css

    /* header standard definition */
    .header-body .header-standard {
        font-size: 10px;
        color: #DDDDDD;
        text-decoration: italic;
    }
    /* header modern definition */
    .header-body .header-modern {
        font-size: 8px;
        color: blue;
        font-weight: bold;
    }

In the header you have to set html like this (for standard family)

.. code-block:: html

    <div class="header-standard">
        here the header content
    </div>


Same for footer styling: just replace :code:`header-body` with :code:`footer-body`.

===========================
Style families for the page
===========================

Different style families can also be defined for the page.
The page body is included in a block with class :code:`page-body`.

.. code-block:: css

    /* family style standard definition */
    .page-body .family-standard {
        font-family: Courier;
        font-size: 12px;
        color: #444444;
    }
    .page-body .family-standard .company-logo {
        border: 0.5mm solid #222222;
        box-shadow: 5px 10px #888;
    }
    .page-body .family-standard thead,
    .page-body .family-standard tfoot {
        display: table-row-group;
    }

In the PDF template content, you have to set the content in a block with css class family-standard

.. code-block:: html

    <div class="family-standard">
        here the body of PDF: content, logo, tables and so on
    </div>

========================================
Watermark style families (mPDF excluded)
========================================

| In the case of watermark text, the style definition is identical as header, footer and page.
| The watermark is included in a block with class :code:`page-watermark`.
| If the text watermark is

.. code-block:: html

    <div class="family-standard">
        DRAFT
    </div>

the families are defined in the CSS style file

.. code-block:: css
    
    /* watermark text family style standard definition */
    .page-watermark .family-standard {
        opacity: 0.1;
    }

==================
Right to Left text
==================

To insert text with RTL orientation it is necessary to define a dedicated css class

.. code-block:: css

    .rtl-dir {
        direction: rtl;
    }

in the PDF template, the text must be enclosed in a tag with class rtl-dir:

.. code-block:: html

    <span class="rtl-dir">here the text</span>